<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>选择支付方式</title>
    <style>
 
        .container {
            display: flex;
            justify-content:  space-evenly;
            align-items: center;
            margin-top: 50px;
        }

        .payment-option {
            cursor: pointer;
            text-align: center;
        }

        .payment-option img {
            width: 100px;
            height: 100px;
            border: 2px solid transparent; /* 默认无边框 */
            transition: border-color 0.3s ease-in-out; /* 边框过渡效果 */
        }

        .payment-option:hover img {
            border-color: blue; /* 悬停时加入蓝色边框 */
        }

        .payment-option p {
            margin-top: 10px;
        }

        .payment-option.selected img {
            opacity: 1; /* 选中时完全显示 */
        }

       .pay-button {
            width: 130px; /* 设置按钮的宽度 */
            height: 50px;
            text-align: center;
            margin: 20px auto; /* 上下20px，中间自动 */
            border-radius: 10px; /* 圆角半径 */
            font-size:20px;
            background-color: #b4cde6; /* 设置背景颜色 */
            border: none; /* 去掉默认边框 */
            display: block; /* 使按钮成为块级元素 */
            cursor: pointer; /* 鼠标悬停时显示手型光标 */
}
  /* 标题居中 */
    div {
        text-align: center;
        margin-bottom: 20px;
    }

    h1 {
        font-size: 24px;
    }

    /* 表单居中 */
    form {
        text-align: left; /* 重设表单内文本左对齐 */
        display: inline-block; /* 使表单内元素块状 */
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }

    /* 表单内标签样式 */
    label {
        font-weight: bold;
    }

    /* 输入框样式 */
    input[type="text"],
    textarea {
        width: 300px;
        padding: 10px;
        margin: 5px 0;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box; /* 防止边框撑开 */
        font-size: 16px;
    }
  /* 提交按钮样式 */
    input[type="submit"] {
        background-color: #4CAF50; /* 绿色按钮 */
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }

    /* 按钮悬停效果 */
    input[type="submit"]:hover {
        background-color: #45a049;
    }
    </style>
</head>
<body>
 <!-- 购买人信息 -->
    <div>
        <h1>购买人信息</h1>
        <form id="checkoutForm">
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name" required><br>

            <label for="phone">电话:</label>
            <input type="text" id="phone" name="phone" required><br>

            <label for="address">地址:</label>
            <textarea id="address" name="address" required></textarea><br>
        </form>
    </div>
    <div class="container">
        <div class="payment-option" >
            <img id="alipayQRCode" src="./img/zhifubao.jpg" alt="支付宝支付二维码">
            <p>支付宝支付</p>
        </div>
        <div class="payment-option" >
            <img id="wechatQRCode" src="./img/weixin.png" alt="微信支付二维码">
            <p>微信支付</p>
        </div>
    </div>
  

    <div >
        <button class="pay-button" id="submitBtn">立即支付</button>
    </div>
<script src="./js/axios.min.js"></script> 
<script src="./js/jquery.js"></script> 
<script>


$(document).ready(function() {
    $('#submitBtn').click(function() {
        var queryParams = window.location.search;

        // 解析查询参数，获取各个参数的值
        var urlParams = new URLSearchParams(queryParams);
        var id = urlParams.get('id');
        var productname = urlParams.get('name');
        var price = urlParams.get('price');
        var quantity = urlParams.get('quantity');
        var totalPrice = urlParams.get('totalPrice');

        var name = $('#name').val();
        var phone = $('#phone').val();
        var address = $('#address').val();

        // 检查必填字段
        if (!name || !phone || !address) {
            alert("Name, Phone, and Address 不能为空");
            return false; // 阻止表单提交
        }

        // 电话号码格式验证 (假设电话号码为10位数字)
        const phonePattern = /^\d{11}$/;
        if (!phonePattern.test(phone)) {
            alert("请输入一个11位数的号码");
            return false; // 阻止表单提交
        }

     
        
        
    
        // 发起异步POST请求
        async function postData() {
            try {
                const response = await axios({
                    method: "post",
                    url: 'http://localhost:8080/zhengshidazuoye/checkout',
                    params: {
                        name: name,
                        phone: phone,
                        address: address,
                        productname: productname,
                        price: price,
                        quantity: quantity,
                        totalPrice: totalPrice
                    }
                });
                console.log(response.data);
                if (response.data.trim() === "success") { // 使用 trim() 方法去除可能的空格
                	 alert("购买成功");
                    window.location.href = 'index.jsp';
                } else {
                    alert(response.data); // 弹出错误信息
                }
                
            } catch (error) {
                console.error(error);
            }
        }

        postData();
    });
});
    </script>
</body>
</html>
